<template>
  <el-header>
    <div style="width: 100%">
      <navigator></navigator>
    </div>
  </el-header>
  <el-container>
  <el-aside>
    <h3 class="title">个人中心</h3>
  <el-menu
    :uniqueOpened="true"
    :default-active="$route.path"
    router
    class="el-menu-vertical-demo"
    background-color="#ffffff"
    text-color="#000000"
    active-text-color="#003399">
    <el-menu-item index="/basicInformation">
      <template #title>
        <span>基本信息</span>
      </template>
    </el-menu-item>
    <el-menu-item index="/purse">
      <template #title>钱包</template>
    </el-menu-item>
    <el-menu-item index="/set">
      <template #title>设置</template>
    </el-menu-item>
    <el-menu-item index="/message">
      <template #title>消息提醒</template>
    </el-menu-item>
  </el-menu>
  </el-aside>
    <el-main>
  <el-card class="information">
    <el-row class="row-details">
      <img src="@/assets/person/refactor.png" class="refactor"  @click="edit">
    </el-row>
    <el-col :span="3">
      <img class="face" src="https://img.zcool.cn/community/01abbd5631f64b32f8755701e053ed.jpg@1280w_1l_2o_100sh.jpg">
    </el-col>
    <el-col :span="20" :offset="1">
    <el-descriptions class="description" title="基本信息">
    <el-descriptions-item label="昵称：" class="nickName">{{ basicInformationInfo.nickname }}</el-descriptions-item>
    <el-descriptions-item label="姓名：" class="name">{{ basicInformationInfo.realName }}</el-descriptions-item>
    <el-descriptions-item label="邮箱：" class="mailbox">{{ basicInformationInfo.email }}</el-descriptions-item>
    <el-descriptions-item label="电话号码：" class="phone">{{ basicInformationInfo.mobile }}</el-descriptions-item>
    <el-descriptions-item label="性别：" class="gender">{{ basicInformationInfo.gender }}</el-descriptions-item>
    <el-descriptions-item label="生日：" class="birthday">{{ basicInformationInfo.birthday }}</el-descriptions-item>
  </el-descriptions>
    </el-col>
  </el-card>
    </el-main>
    </el-container>
</template>

<script lang="ts" src="./basicInformation.ts">

</script>

<style scoped>
.face{
  width: 100px;
  height: 100px;
  margin: 0px 0px;
}
.el-header{
  padding-inline-end: 0px;
  padding-inline-start: 0px;
}
.el-menu-vertical-demo{
  width: 250px;
  font-size: 30px;
}
.title{
  width: 200px;
  padding-left: 25px;
}
.information{
  height: 200px;
  width: 900px;
  margin: 100px 100px;
}
.description{
  width: 150%;
  margin: 0px 0px;
}
.refactor {
  width: 3%;
  margin: 0px 820px;
}
</style>
